<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>台码管理</title>
		<script src="./js/base.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			table{
			    background-color: #FFF;
			    width: 100%;
			    font-size: 12px;
			    min-width: 900px;
			}
			th{
			    position: relative;
			    word-wrap: normal;
			    text-overflow: ellipsis;
			    vertical-align: middle;
			    border-bottom: 1px solid #ebeef5;
			    
			}
			.filter-box input,select,option{
				-webkit-appearance: none;
			    background-color: #fff;
			    background-image: none;
			    border-radius: 4px;
			    border: 1px solid #dcdfe6;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    color: #606266;
			    display: inline-block;
			    font-size: inherit;
			    height: 35px;
			    line-height: 35px;
			    outline: 0;
			    padding: 0 15px;
			    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			}
			thead{
			    padding: 8px 0;
			    color: #909399;
			    background-color: #F5F7FA;
			}
			tr{
			    padding: 8px 0;
			}
			tr:hover{
			    background-color: #ccd2df;
			}
			td{
			    border: none;
			    border-bottom: 1px solid #ebeef5;
			}
			.table-cell{
			    white-space: normal;
			    word-break: break-all;
			    line-height: 22px;
			    padding: 10px 10px;
			    text-align: center;
			    min-width: 40px;
			    box-sizing: border-box;
			}
			/*.pages-control{
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    height: 40px;
			    border-top:1px solid #ebeef5;
			}*/
			.code-activated{
			    background-color: #F5F7FA;
			}
			.btn{
				display: inline-block;
				padding: 5px 10px;
				background-color: #FFFFFF;
				border: 1px solid #EDEDED;
				border-radius: 5px;
				font-size: 14px;
				cursor: pointer;
				
			}
			.btn:hover{
				background-color: #EDEDED;
			}
			.filter-box,.list-operate{
				padding: 10px;
			}
			/*加载动画*/
			.spinner {
			  margin: 100px auto;
			  width: 50px;
			  height: 60px;
			  text-align: center;
			  font-size: 10px;
			}
			 
			.spinner > div {
			  background-color: #67CF22;
			  height: 100%;
			  width: 6px;
			  display: inline-block;
			   
			  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
			  animation: stretchdelay 1.2s infinite ease-in-out;
			}
			 
			.spinner .rect2 {
			  -webkit-animation-delay: -1.1s;
			  animation-delay: -1.1s;
			}
			 
			.spinner .rect3 {
			  -webkit-animation-delay: -1.0s;
			  animation-delay: -1.0s;
			}
			 
			.spinner .rect4 {
			  -webkit-animation-delay: -0.9s;
			  animation-delay: -0.9s;
			}
			 
			.spinner .rect5 {
			  -webkit-animation-delay: -0.8s;
			  animation-delay: -0.8s;
			}
			 
			@-webkit-keyframes stretchdelay {
			  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
			  20% { -webkit-transform: scaleY(1.0) }
			}
			 
			@keyframes stretchdelay {
			  0%, 40%, 100% {
			    transform: scaleY(0.4);
			    -webkit-transform: scaleY(0.4);
			  }  20% {
			    transform: scaleY(1.0);
			    -webkit-transform: scaleY(1.0);
			  }
			}
			/*模态框*/
			.model-bg{
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.3);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 1000;
			}
			.look-code{
				width: 600px;
				height: 600px;
				background-color: #FFFFFF;
				border-radius: 4px;
				box-sizing: border-box;
				padding: 10px 20px;
				position: absolute;
				z-index: 1;
				margin-left: -300px;
				margin-top: -300px;
				top: 50%;
				left: 50%;
			}
			.model-header{
				display: flex;
				justify-content: space-between;
			}
			.model-content{
				text-align: center;
			}
			.model-footer{
				text-align: center;
				display: flex;
				box-sizing: border-box;
				padding: 30px 50px 0;
				justify-content: space-around;
			}
		</style>
		<script src="./js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div id="app">
				<div class="filter-box">				
					<input type="text" placeholder="台码卡号" v-model="filter.platformCode" />
					<input type="text" placeholder="所属商户" v-model="filter.merchantId" />
					<!--<select v-model="filter.state">
						<option value="1">已拨码</option>
						<option value="2">待激活</option>
						<option value="3">已激活</option>
					</select>-->
					<span class="btn" @click="handleQuery">筛选</span>
					<span class="btn" @click="handleReset" >重置</span>
				</div>
				<div class="list-container" v-if="!loading">
					<div class="list-operate">
						<span class="btn" @click="exportQrcode">批量导出二维码</span>
						<span class="btn" @click="handleSubmitExport">导出列表</span>
					</div>
					<div class="code-list">
	                  <table border="0" cellspacing="0" v-if="qrcodeList.length !== 0">
	                    <thead>
	                        <tr>
	                            <th>
	                                <div class="table-cell">
	                                	<input type="checkbox" @change="handleAllCheck" /><span>全选</span>
	                                </div>
	                            </th>
	                            <th><div class="table-cell">台卡卡号</div></th>
	                            <th><div class="table-cell">卡片类型</div></th>
	                            <th><div class="table-cell">所属代理商</div></th>
	                            <th><div class="table-cell">所属商户</div></th>
	                            <th><div class="table-cell">商户名称</div></th>
	                            <th><div class="table-cell">推广人</div></th>
	                            <th><div class="table-cell">拨码状态</div></th>
	                            <th><div class="table-cell">状态</div></th>
	                            <th><div class="table-cell">创建时间</div></th>
	                            <th><div class="table-cell">创建人</div></th>
	                            <th><div class="table-cell">操作</div></th>
	                        </tr>
	                    </thead>
	                    <tbody>
	                        <tr v-for="(cell,index) in qrcodeList" :class="{'code-activated':cell.dialCodeType === '1'}" :key="index">
	                            <td>
	                                <div class="table-cell">
	                                    <label ref="checkbox">
	                                        <input type="checkbox" class="checkbox">
	                                        <input type="hidden" :value="cell.platformCode" class="checkbox-value" >
	                                    </label>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.platformCode"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.platformType=='1'? '台卡':'其他类型'"></span>
	                                </div>
	                            </td>
	                             <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.agent || '暂无代理' "></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.shopId || '暂无商户'"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.shopName || '暂无商户'"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.introducerPhone || '暂无推广人'"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.dialCodeType ==='0'?'未拨码':'已拨码'"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="handleStatus(cell.state)"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.createTime"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span v-html="cell.createBy"></span>
	                                </div>
	                            </td>
	                            <td>
	                                <div class="table-cell">
	                                    <span class="btn"  @click="handleLookcode(cell)" >查看台码</span>
	                                </div>
	                            </td>
	                        </tr>
	                    </tbody>
	                  </table>
	                  <div style="padding:20px;text-align:center;border-top:1px solid #e2feef;" v-else>
	                      		暂无数据
	                  </div>
	              </div>
				</div>
				<div v-else class="list-container">
					<div class="spinner">
					  <div class="rect1"></div>
					  <div class="rect2"></div>
					  <div class="rect3"></div>
					  <div class="rect4"></div>
					  <div class="rect5"></div>
					</div>
					<div id="msg" style="text-align: center;">获取中。。。</div>
				</div>
				
				<!--查看台码的模态框-->
				<div class="model-bg" v-if="preview">
					<div class="look-code" >
						<div class="model-header">
							<h3>查看台码</h3>
							<span @click="preview = false" style="display: inline-block;width: 20px;height: 20px;line-height: 20px;text-align: center;cursor: pointer;">×</span>
						</div>
						<div class="model-content" >
							<div style="text-align: center;height: 350px;">
								<img style="width:350px;height: 350px;border: 1px solid #dfdfdf;" :src="previewUrl" :alt="previewCode || 加载台码失败" />
							</div>
							
							<div style="padding: 10px 0;" v-html="previewCode"></div>
						</div>
						<div class="model-footer">
							<span class="btn" @click="handleDownload" >下载</span>
							<span class="btn" @click="preview = false">关闭</span>
						</div>
					</div>
				</div>
				
				
			</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			/**
			 * 获取二进制文件流
			 * @param {Object} type
			 * @param {Object} url
			 * @param {Object} cb
			 */
			function getBlob(type,url,cb){
				var oReq = new XMLHttpRequest(); 
				oReq.open(type, url, true); 
				oReq.responseType = "blob"; 
				oReq.onload = function(oEvent) { 
					var blob = oReq.response; // ... 
					if(typeof cb == "function"){
						cb(blob);
					}
				}; 
				oReq.send();
			}
			
			function downloadFile(url) {   
			    try{ 
			    	let a = document.createElement('a')
	                a.download = "codes.zip"
	                a.href = url
	                document.body.appendChild(a)
	                a.click()
	                document.body.removeChild(a)
			    }catch(e){ 
			
			    } 
			}
			var app = new Vue({
				el:"#app",
				data:{
					loading:false,
					allcheck:false,
					preview:false,
					previewUrl:"",
					previewCode:"",
					exportInfo:{
			            type:0, // 0 条件  1 勾选
			        },
					filter:{
						platformCode:"",
						merchantId:"",
						state:"1"
					},
					qrcodeList:[]
				},
				methods:{
					 handleAllCheck(e){
						// 全选
						  let value  = e.target.checked;
				          this.$refs.checkbox.forEach((cell)=>{
				          	 	cell.firstChild.checked = value;   
				          })
				      },
				      
				       handleSubmitExport(){
				          // 导出操作
						  let selectedList = [];
				          this.$refs.checkbox.forEach((cell)=>{
				              if(cell.firstChild.checked){
				                selectedList.push(cell.lastChild.value)
				              } 
				          })
				          
				          if(selectedList.length === 0){
				          		alert("请至少选择一条数据导出！")
				          		return;
				          }
				          
				          let arrType = this.exportInfo.type;
				          let arrCode = selectedList.join(',');
				          let token = sessionStorage.getItem(1);
				          let url = window.baseUrl + `user/app/Platform/export/${token}`;
				          let params = `arrType=${arrType}&arrCode=${arrCode}`;
				          params = encodeURI(params);
				          url = url + '?' + params;
				          try{
				          	getBlob('post',url,function(data){
					          	 let reader = new FileReader()
						            reader.readAsDataURL(data)
						            reader.onload = (e) => {
						                let a = document.createElement('a')
						                a.download = "info.xlsx"
						                a.href = e.target.result
						                document.body.appendChild(a)
						                a.click()
						                document.body.removeChild(a)
						            }
					          })
				          }catch(e){
				          	//TODO handle the exception
				          	alert("导出出错啦！")
				          }
				          
				           
				      },
				      exportQrcode(){
				      	  // 提交拨码信息
				    
				          let selectedList = [];
				          this.$refs.checkbox.forEach((cell)=>{
				              if(cell.firstChild.checked){
				                selectedList.push(cell.lastChild.value)
				              } 
				          })
				          
				          if(selectedList.length === 0){
				          		alert("请至少选择一条数据导出！")
				          		return;
				          }
				          
				          let dialCode = selectedList.join(',');
				          let url = window.baseUrl + 'user/app/Platform/exportImg/'+ sessionStorage.getItem(1) +'?dialCode='+dialCode;
				          
				          $.ajax({
				          	type:"post",
				          	url,
				          	async:true,
				          	success:function(res){
				          		if(res.resp_code==="000000"){
					                downloadFile(res.result);
					            }else{
					            	alert(res.resp_message)
					            }
				          	}
				          });
				      		
				      },
				      handleLookcode(cell){
				          // 查看台码
				          console.log(cell)
				           this.previewUrl = cell.qrcCode;
          					this.previewCode = cell.platformCode;
				          this.preview = true;
				          
				          
				      },
				      handleStatus(status){
				          if(status==='0'){
				              return "未绑定";
				          }
				          if(status==='1'){
				              return "未激活";
				          }
				          if(status==='2'){
				              return "已激活";
				          }
				          return status;
				      },
				      handleReset(){
				      	 this.filter.merchantId = '';
				      	 this.filter.platformCode='';
				      	 this.filter.state='';
				      	 this.handleQuery();
				      },
				      handleQuery(){
				          let merchantId = this.filter.merchantId;
				          let platformCode = this.filter.platformCode;
				          let state = this.filter.state;
				          let token = sessionStorage.getItem(1);
				          let phone = sessionStorage.getItem(2);
				          let url = window.baseUrl + `user/app/Platform/queryPlatform/${token}?agent=${phone}&merchantId=${merchantId}&platformCode=${platformCode}`;
				          url=encodeURI(url);
				          this.loading = true;
				          let _this = this;
				          $.ajax(url,{
				          	  type:"get",
					          success:function(res){
					          	_this.loading = false;
					          	if(res.resp_code === '000000'){
				                	_this.qrcodeList = res.result;
					          	}else{
					          		alert(res.resp_message);
					          	}
					          },
					          error:function(err){
					          	alert("查询失败！服务器繁忙！");
					          	$('#msg').html("查询失败！服务器繁忙！")
					          }
				          })
				    
				
				      },
				      handleDownload(){
				      	 // 下载二维码
				      	 alert("请右键图片，选择图片另存为！")
				      }
				},
				created:function(){
					this.handleQuery();
				}
		
			})
		</script>
		
	</body>
</html>
